const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const messageEl = document.getElementById('message');

// 显示提示信息
function showMessage(text, isError = true) {
    messageEl.textContent = text;
    messageEl.style.color = isError ? 'red' : 'green';
}

// 1. XMLHttpRequest 方式实现登录请求
function loginWithXHR() {
    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();

    // 表单验证
    if (!username || !password) {
        showMessage('用户名和密码不能为空');
        return;
    }

    // 创建XHR对象
    const xhr = new XMLHttpRequest();

    // 配置请求（POST方式，后端登录接口地址）
    xhr.open('POST', '/api/login', true); // 实际项目替换为真实接口地址
    xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

    // 监听请求状态变化
    xhr.onreadystatechange = function () {
        // 请求完成且响应就绪
        if (xhr.readyState === 4) {
            try {
                // 解析JSON响应
                const response = JSON.parse(xhr.responseText);

                if (xhr.status === 200) {
                    // 登录成功处理
                    if (response.success) {
                        showMessage('登录成功，即将跳转...', false);
                        // 存储token（实际项目中使用localStorage或cookie）
                        localStorage.setItem('token', response.token);
                        // 跳转首页
                        setTimeout(() => {
                            window.location.href = '/home';
                        }, 1500);
                    } else {
                        // 后端返回的业务错误
                        showMessage(response.message || '登录失败');
                    }
                } else {
                    // HTTP状态码错误（如401、500等）
                    showMessage(`服务器错误：${response.message || xhr.statusText}`);
                }
            } catch (error) {
                // 解析响应失败（如后端返回非JSON格式）
                showMessage('服务器响应格式错误');
                console.error('解析响应失败：', error);
            }
        }
    };

    // 处理网络错误
    xhr.onerror = function () {
        showMessage('网络异常，请检查网络连接');
    };

    // 发送请求（发送JSON格式的请求体）
    xhr.send(JSON.stringify({
        username: username,
        password: password
    }));
}

// 2. Fetch API + Promise 方式实现登录请求
function loginWithFetch() {
    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();

    // 表单验证
    if (!username || !password) {
        showMessage('用户名和密码不能为空');
        return;
    }

    // Fetch返回Promise对象，支持链式调用
    fetch('/api/login', { // 实际项目替换为真实接口地址
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: username,
            password: password
        }),
        // 跨域请求时是否携带cookie（根据后端需求配置）
        credentials: 'include'
    })
        // 第一步：处理HTTP响应状态
        .then(response => {
            // 解析响应体为JSON（返回新的Promise）
            return response.json().then(data => {
                // 包装HTTP状态和响应数据
                return {
                    status: response.status,
                    data: data
                };
            });
        })
        // 第二步：处理业务逻辑
        .then(({ status, data }) => {
            if (status === 200) {
                if (data.success) {
                    showMessage('登录成功，即将跳转...', false);
                    localStorage.setItem('token', data.token);
                    setTimeout(() => {
                        window.location.href = '/home';
                    }, 1500);
                } else {
                    showMessage(data.message || '登录失败');
                }
            } else {
                showMessage(`服务器错误：${data.message || '未知错误'}`);
            }
        })
        // 捕获所有异常（网络错误、解析错误等）
        .catch(error => {
            showMessage('请求失败，请稍后重试');
            console.error('请求异常：', error);
        });
}

// 登录入口函数（可切换使用XHR或Fetch）
function login() {
    // 调用XMLHttpRequest方式
    // loginWithXHR();

    // 调用Fetch + Promise方式（推荐）
    loginWithFetch();
}